<template>
  <a-layout class="layout">
    <!--  侧边栏 start  -->
    <a-layout-sider class="side" :trigger="null" :collapsible="true" v-model:collapsed="collapsed">
      <Menu class="side" />
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="header p-0">
        <header-content v-model="collapsed" />
      </a-layout-header>
      <a-layout-content class="content"></a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import Menu from '@/layouts/main/SelfMenu.vue'
import { ref } from 'vue'
import HeaderContent from '@/layouts/main/HeaderContent.vue'

const collapsed = ref<boolean>(false)
</script>

<style lang="less" scoped>
.layout {
  width: 100%;
  height: 100%;

  .side {
    text-align: center;
    color: #ffffff;
    background-color: #000c17;
  }

  .header {
    text-align: center;
    color: #ffffff;
    background-color: #ffffff;
    height: auto;
    padding: 0;
  }

  .content {
    text-align: center;
    color: #ffffff;
    background-color: #108ee9;
    line-height: 120px;
  }

  .footer {
    text-align: center;
    color: #ffffff;
    background-color: #7dbcea;
  }
}
</style>
